<template>
  <view class="question-layout">
    <my-header title="常见问题"></my-header>
    <my-content class="content">
      <view style="visibility: hidden">1</view>
      <view class="cate">
        <view class="cate_header">问题分类</view>
        <view class="cate_box">
          <view
            class="cate_item"
            @click="header(`/packageB/content/questionList?cate=${item.id}`)"
            v-for="item in questionData.cate"
            :key="item.id"
          >
            <view class="cate_title">{{ item.title }}</view>
            <image class="right" src="https://www.dingxians.cn/images/common/arrow-right.png"></image>
          </view>
        </view>
      </view>

      <view class="cate">
        <view class="cate_header">常见问题</view>
        <view class="cate_box">
          <view
            class="cate_item"
            @click="header(`/packageB/content/questionDetail?id=${item.id}`)"
            v-for="item in questionData.question"
            :key="item.id"
          >
            <view class="cate_title">{{ item.title }}</view>
            <image class="right" src="https://www.dingxians.cn/images/common/arrow-right.png"></image>
          </view>
        </view>
      </view>
    </my-content>
  </view>
</template>

<script>
import api from '../../api'
export default {
  data() {
    return {
      questionData: {
        cate: [],
        question: [],
      },
    }
  },
  onLoad() {
    this.getData()
  },
  onShow() {},
  methods: {
    getData() {
      uni.showLoading({
        title: '数据加载中',
      })
      api.questions
        .index()
        .then((res) => {
          if (res.code === 200) {
            uni.hideLoading()
            this.questionData = res.data.data
          }
        })
        .catch((error) => {
          console.log(error)
        })
    },
  },
}
</script>

<style lang="scss" scoped>

.question-layout {
  background: #141414;
  height: 100vh;
}

.content {
  background: #141414;
  height: 100vh;
  font-size: 28rpx;
  .cate {
    display: flex;
    flex-direction: column;
    .cate_header {
      color: #999;
      margin: 20rpx 30rpx;
    }
    .cate_box {
      display: flex;
      flex-direction: column;
      .cate_item {
        display: flex;
        justify-content: space-between;
        background-color: #1f1f1f;
        align-items: center;
        height: 80rpx;
        line-height: 80rpx;
				color: white;
				margin: 0 30rpx;
				padding: 0 20rpx;
        .cate_title {
          /* margin-left: 30rpx; */
        }
        .right {
          /* margin-right: 30rpx; */
          width: 22rpx;
          height: 22rpx;
        }
      }
    }
  }
}
</style>
